<template>
  <div class="help">
    <!-- 头部信息展示区 -->
    <div class="header">
      <van-sticky>
        <van-nav-bar title="帮助" />
      </van-sticky>
    </div>
    <!-- 常见问题展示区 -->
    <div class="Question">
      <van-cell title="常见问题" icon="question" />
    </div>
    <!-- 常见问题详细内容 -->
    <div>
      <van-cell-group>
        <van-cell>1.优惠券如何使用？</van-cell>
        <van-cell>2.取消订单后钱什么时候到账？</van-cell>
        <van-cell>3.可以固定同一个阿姨服务吗？</van-cell>
        <van-cell>4.如何选择上一次服务的阿姨？</van-cell>
        <van-cell>5.预约成功后在哪查看？</van-cell>
      </van-cell-group>
    </div>
    <!-- 更多问题展示区 -->
    <div class="Question">
      <van-cell title="更多问题" icon="question" />
    </div>
    <!-- 更多问题详细内容 -->
    <div class="firstContent">
      <div class="flex-item">订单相关</div>
      <div class="flex-item">客户端使用</div>
      <div class="flex-item">优惠券与活动</div>
    </div>
    <div class="secondContent">
      <div class="flex-item">支付与费用</div>
      <div class="flex-item">服务相关</div>
      <div class="flex-item"></div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
/* 标题样式 */
.header .title {
  font-family: "webfont";
  font-size: 17px;
  color: black;
  height: 65px;
  text-align: center;
  line-height: 60px;
}
/* 更多问题第一部分盒子 */
.firstContent {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}
/* 更多问题第二部分盒子 */
.secondContent {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}
/* 内容展示样式 */
.flex-item {
  width: 100px;
  height: 50px;
  text-align: center;
  line-height: 60px;
  font-size: 12px;
  color: #000000c4;
}
/* 组件样式里的字体改变 */
::v-deep .van-cell__title {
  font-size: 20px;
}
.van-nav-bar {
  background: linear-gradient(90deg, #a4edff, #3628f8);
}
::v-deep .van-nav-bar__title {
  color: white !important;
  font-weight: bolder;
}
</style>